<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 82 72"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#06F" d="M59.227 12.779C55.51 5.215 47.778 0 38.804 0 26.784 0 16.96 9.357 16.107 21.207 7.269 23.737.833 31.492.833 40.667.833 51.489 9.79 60.38 21.083 61h37.971c12.573 0 22.78-10.813 22.78-24.147 0-12.852-9.999-23.319-22.607-24.074Z"/><path fill="#002A54" d="M34.92 42.61h-6.57v-7.646c0-1.665.33-3.216.991-4.656a12.058 12.058 0 0 1 2.738-3.797c1.164-1.092 2.537-1.95 4.119-2.575 1.581-.624 3.31-.936 5.188-.936 1.668 0 3.275.312 4.822.936a13.642 13.642 0 0 1 4.12 2.575 12.746 12.746 0 0 1 2.867 3.797c.712 1.44 1.069 2.991 1.069 4.656v7.646h-6.309v-6.19c0-2.184-.608-3.875-1.825-5.071-1.217-1.197-2.867-1.795-4.953-1.795-1.877 0-3.39.598-4.536 1.795-1.147 1.196-1.72 2.887-1.72 5.071v6.19Zm22.472 3.121c.939 0 1.747.338 2.425 1.015.677.676 1.016 1.482 1.016 2.418V65.29c0 .936-.165 1.812-.495 2.627a6.775 6.775 0 0 1-1.356 2.132 6.256 6.256 0 0 1-2.033 1.43c-.782.348-1.642.521-2.58.521H28.037c-.939 0-1.79-.173-2.555-.52a6.123 6.123 0 0 1-1.955-1.379 6.104 6.104 0 0 1-1.252-2.002 6.71 6.71 0 0 1-.443-2.445v-16.49c0-.936.33-1.742.991-2.418.66-.677 1.46-1.015 2.398-1.015h32.17Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Help4 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
